<template>
	<div class="recharge-manage">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
				<div class="widget-head am-cf">
					<div class="widget-title am-fl">学员余额</div>
				</div>
	        	<div class="widget-body am-fr">
	        		<div class="am-u-md-12 one-line">
	        			
				        <el-select size="small" @change="" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3" v-model="query.areaTeamId" placeholder="请选择区域">
	                        <el-option
	                            v-for="item in areaTeams"
	                            :key="item.areaTeamId"
	                            :label="item.name"
	                            :value="item.areaTeamId">
	                        </el-option>
	                    </el-select>
	                    <el-select clearable size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
				                   v-model="query.lastCampusId" no-data-text="无数据，请切换区域" placeholder="最近报读校区">
				        	<el-option
					            v-for="item in busTeams"
					            :key="item.campusId"
					            :label="item.campusName" 
					            :value="item.campusId">
				        	</el-option>
				        </el-select>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.studentName" placeholder="学生姓名"/>
				            </div>
				        </div>
				        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.studentPhoneNo" placeholder="学生电话"/>
				            </div>
				        </div>
	        		</div>
	        		<div class="am-u-md-12 one-line">
	                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
					    	<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
					    	</button>
					    	<button @click="handleExport" type="button" class="btn-search am-btn am-btn-default am-btn-success">
						        <span class="am-icon-search"></span>导出
						    </button>
					   	</div>
	        		</div>

	        		<div class="am-u-sm-12">
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              empty-text="暂无数据"
			              style="min-width: 100%">
			              <el-table-column
			                prop="studentName"
			                label="学生姓名"
			                min-width="100">
                            </el-table-column>
                            <el-table-column
			                label="学生电话"
			                prop="studentPhoneNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="学号"
			                prop="studentNo"
			                width="150">
			              </el-table-column>
			             
			              <el-table-column
			                label="最近报读校区"
			                prop="lastCampusName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="在读期数"
			                prop="regPeriodNames"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="退费期数（只统计退余额并且剔除转班）"
			                prop="refundPeriodNames"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="就读年级"
                            prop="gradeName"
			                min-width="100">
			                
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="就读学校"
                            prop="school"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="账户余额"
                            prop="balanceAmount"
			                min-width="100">
			              </el-table-column>
			            </el-table>
			        </div>

			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" />
			            </div>
			        </div>

	        	</div>
	        </div>
	    </div>
	</div>
</template>
<script>
	import io from '../../lib/io'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return{
				tableData: [],
				total: 0,
				query:{
					areaTeamId: window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
                    lastCampusId: '',
                    studentName:'',
                    studentPhoneNo:"",
					pageNo: 1,
					pageSize: 10,
				},
				
			}
		},
		components: {
	    	Pagination,
	    },
		computed: {
			busTeams: function () {
	        	return ( ( this.query.areaTeamId  ) ? ( this.$root.config.campusList.filter((val) => val.areaTeamId === this.query.areaTeamId) || [] ) : [] )
	      	},
	      	areaTeams() {
                return this.$root.config.areaTeams || []
            },
	    },
	    watch:{
			
        },
        mounted: function () {
            $(window).smoothScroll()
        },
	    methods:{
	    	handleExport(){
	    		let data = {...this.query};
	    		delete data.pageSize;
	    		delete data.pageNo;
	      		io.downloadFile(io.exportStudentBalance, data);
	      	},
	      	search(){
	      		this.query.pageNo = 1;
	      		this.handleSearch();
	      	},
	      	handleSearch(pageNo){
	      		this.query.pageNo = pageNo || this.query.pageNo || 1
	      		io.post(io.studentBalancePage, this.query , (ret) => {
		        	if(ret.success){
		        		this.tableData = ret.data.list;
		        		this.total = ret.data.total;
		        	}else{
                        this.$alert(ret.desc)
                    }		        	
		        })
	      	},
	    },
	    created(){
	    	this.handleSearch();
	    },
	}
</script>
<style lang="less" scoped>
	.recharge-manage{
		[class*=am-u-]{
			padding-left: 0;
			padding-right: 0;
			margin-left: 0.6%;
			margin-right: 0.6%;
		}
		.one-line{
			margin-left: 0;
			margin-right: 0;
		}
		.am-u-lg-3{
			width: 23.8%;
		}
	}
</style>